﻿<%@ Page Title="Consultas" Language="VB" MasterPageFile="~/Plantilla1.master" AutoEventWireup="false" CodeFile="CSearch.aspx.vb" Inherits="CSearch" %>
<%@ MasterType VirtualPath="~/Plantilla1.master" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <link rel="stylesheet" href="css/custom-theme/jquery-ui-1.8.17.custom.css"/>
	<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
	<script type="text/javascript" src="js/jquery.ui.core.js"></script>
	<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
	<script type="text/javascript" src="js/jquery.ui.accordion.js"></script>
    <script type="text/javascript" src="js/jquery.ui.tabs.js"></script>
    <link rel="stylesheet" href="css/demos.css"/>

 


    <script type="text/javascript">
        $(function () {
            $("#tabs").tabs();
        });
	</script>

    <script language="javascript" type="text/javascript"  >

        $(function () {

            getTabla();

        });


        // GetTabla1
        function getTabla() {


            var cabeceras = new Array();
            var table = document.getElementById('ContentPlaceHolder1_GridView1');
            var lblSubTitulo = "Top Celulares";
            var StrNombres = new Array();
            var IntValores = new Array();
            var pos = 0;


            try {

                totalLineas = parseInt(table.rows.length - 1);
                totalColumna = table.rows[0].cells.length;

            }
            catch (x) {
                totalLineas = 0;
                totalColumna = 0;
             //   alert(x);
            }

            if (totalLineas == 0) {
                return;
            }


            for (i = 1; i <= totalLineas; i++) {
            var pos = i - 1;
            IntValores[pos] = table.rows[i].cells[2].innerHTML

            }

//            var Fila01;
//            try {
//                Fila01 = table.rows[1].cells[1].innerHTML;
//            }
//            catch (e) {
//                Fila01 = 0;
//                // alert(e); 
//            }

//            var Fila02;
//            try {
//                Fila02 = table.rows[2].cells[1].innerHTML;
//            }
//            catch (e) {
//                Fila02 = 0;
//                // alert(e); 
//            }

//            var Fila03;
//            try {
//                Fila03 = table.rows[3].cells[1].innerHTML;
//            }
//            catch (e) {
//                Fila03 = 0;
//                // alert(e); 
//            }

//            var Fila04;
//            try {
//                Fila04 = table.rows[4].cells[1].innerHTML;
//            }
//            catch (e) {
//                Fila04 = 0;
//                // alert(e); 
//            }

//            var Fila05;
//            try {
//                Fila05 = table.rows[5].cells[1].innerHTML;
//            }
//            catch (e) {
//                Fila05 = 0;
//                // alert(e); 
//            }


            for (i = 1; i <= totalLineas; i++) {
            var pos = i - 1;
            StrNombres[pos] = table.rows[i].cells[1].innerHTML

            }
            


            setTimeout(function () { getChart(cabeceras, IntValores , StrNombres , totalLineas, 'container', lblSubTitulo.innerHTML); }, 1000)


        }

        //------------------------------------ 
        function getChart(cabeceras, IntValores, StrNombres , totalLineas, strContainer, subTittulo) {


            var options;


            options = {
                chart: { renderTo: strContainer,
                    type: 'column'
                },
                title: { text: 'Top Celulares'
                },
                subtitle: { text: ''
                },
                yAxis: { min: 0,
                    title: {
                        text: '',
                        align: 'high'
                    },
                    labels: { overflow: 'justify' }
                },
                tooltip: {
                    formatter: function () {
                        return '' +
                this.series.name + ': ' + this.y + ' Vendido ';
                    }
                },
                plotOptions: {
                    bar: { dataLabels: { enabled: true} }
                },
              legend: { //layout: 'Vertical',
                  //  align: 'right',
                  //  verticalAlign: 'top',
//                    x: -100,
//                    y: 0,
                    maxHeight:44
                  //  floating: true,
                   // borderWidth: 1,
                  //  backgroundColor: '#FFFFFF',
                  //  shadow: true
                },
                credits: {
                    enabled: false
                },
                series: []
            };


          


            options.xAxis = new Array();
            options.xAxis[0] = new Object();
            options.xAxis[0].categories = ' Top de celulares ';

            options.series = new Array();


             for (i = 1; i <= totalLineas; i++) {
            var pos = i - 1;
            var variable = parseInt(IntValores[pos]);
            options.series[pos] = new Object();
            options.series[pos].name = StrNombres[pos];
            options.series[pos].data = [variable];

            }

            

//            options.series[1] = new Object();
//            options.series[1].name = StrNombres[1];
//            options.series[1].data = [parseInt(Fila02)];

//            options.series[2] = new Object();
//            options.series[2].name = StrNombres[2];
//            options.series[2].data = [parseInt(Fila03)];

//            options.series[3] = new Object();
//            options.series[3].name = StrNombres[3];
//            options.series[3].data = [parseInt(Fila04)];

//            options.series[4] = new Object();
//            options.series[4].name = StrNombres[4];
//            options.series[4].data = [parseInt(Fila05)];

            //alert(options.series[i]); 


            var chart = new Highcharts.Chart(options);

            //document.forms["form1"].submit();


        }

        function limpiarDiv(id) {
            var div;

            div = document.getElementById(id);

            try {
                while (div.hasChildNodes())
                    div.removeChild(div.lastChild);
            } catch (e) {

            }



        }
        
    </script>

   <%-- <script language="javascript" type="text/javascript">


        $(function () {

            var intCantidad = 0;

            var nombre = "vacio";
            var totalLineas = 0;
            var totalColumna = 0;

            var Fecha = new Array();

            var table = document.getElementById('ContentPlaceHolder1_GridView1');


            try {
                totalLineas = parseInt(table.rows.length - 1);
                totalColumna = table.rows[0].cells.length;

            }
            catch (x) {
                totalLineas = 0;
                totalColumna = 0;
                alert(x);
            }

            if (totalLineas == 0) {
                return;
            }



            for (i = 1; i <= totalLineas; i++) {



                intCantidad = table.rows[i].cells[1].innerHTML;
//                intReal = intReal.replace('<SPAN>', '');
//                intReal = intReal.replace('</SPAN>', '');



                if (intCantidad.length == 0)
                    intCantidad = 0;
                else
                    intCantidad = parseInt(intReal);

                if (intCantidad == 0)
                    intCantidad = 0;


                // Nombre 
                nombre = table.rows[i].cells[0].innerHTML

                var j = i - 1;
                if (i == 5) {

                    var Actual = table.rows[3].cells[1].innerHTML;
                    Actual = Actual.replace(',', '');
                    Actual = parseInt(Actual);


                    getDobleAguja(nombre, Actual, intReal, i, Fecha[j], table.rows[3].cells[1].innerHTML);

                } else {

                    var Texto = table.rows[i].cells[1].innerHTML

                    getchart(nombre, intReal, intMeta, i, Fecha[j], Texto, herfGuage[j]);
                }
            } // acaba for


        });


        function dias(mes, anno) {

            mes = parseInt(mes);
            anno = parseInt(anno);
            switch (mes) {
                case 1: case 3: case 5: case 7: case 8: case 10: case 12: return 31;
                case 2: return (anno % 4 == 0) ? 29 : 28;
            }
            return 30;


        }


        function getchart(nombre, real, meta, i, titulo, Texto, strHerfGuage) {

            var rojo = parseInt(meta * 0.60);
            var amarillo = parseInt(meta);
            var verde = parseInt(meta * 1.20);
            var porcentaje = verde * 0.05;

            // alert(rojo + ' ' + amarillo + ' ' + verde + ' ' + porcentaje + ' ->' + real); 


            var chart = new Highcharts.Chart({

                chart: {

                    renderTo: 'chart_div' + i,
                    type: 'gauge',
                    events: {
                        click: function (event) {
                            window.location.href = strHerfGuage;
                        }
                    },
                    plotBackgroundColor: null,
                    plotBackgroundImage: null,
                    plotBorderWidth: 0,
                    plotShadow: false
                },

                title: {
                    text: titulo


                },
                subtitle: {
                    text: ''

                },

                pane: {
                    startAngle: -150,
                    endAngle: 150,
                    background: [{
                        backgroundColor: {
                            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                            stops: [
                                [1, '#000000'],
                                [1, '#000000']
                            ]
                        },
                        borderWidth: 0,
                        outerRadius: '108%'
                    },



                       {
                       // default background
                   }, {
                       backgroundColor: '#DDD',
                       borderWidth: 0,
                       outerRadius: '105%',
                       innerRadius: '103%'
                   }]
                },

                // the value axis
                yAxis: {
                    min: 0,
                    max: verde,

                    minorTickInterval: porcentaje,

                    tickInterval: meta,
                    tickWidth: 2,
                    tickPosition: 'inside',
                    tickLength: 10,
                    tickColor: '#666',
                    labels: {
                        step: 1,
                        rotation: 'auto'
                    },
                    title: {

                },
                plotBands: [{
                    from: 0,
                    to: rojo,
                    color: '#DF5353' // red
                }, {
                    from: rojo,
                    to: amarillo,
                    color: '#DDDF0D' // yellow
                }, {
                    from: amarillo,
                    to: verde,
                    color: '#55BF3B' // green
                }]
            },

            series: [{
                name: 'Total',
                data: [real],
                dataLabels: {
                    formatter: function () {
                        var Actual = Texto;
                        return '<span style="color:#000000">' + Actual + ' Trs </span>';

                    },
                    backgroundColor: {
                        linearGradient: {
                            x1: 0,
                            y1: 0,
                            x2: 0,
                            y2: 1
                        },
                        stops: [
                        [0, '#DDD'],
                        [1, '#FFF']
                    ]
                    }
                }
            }]

        },

            function (chart) {

            });

    }


    function getDobleAguja(nombre, Actual, Anterior, i, titulo) {

        var rojo = parseInt(Actual * 0.60);
        var amarillo = parseInt(Actual);
        var verde = parseInt(Actual * 1.20);
        var porcentaje = verde * 0.05;



        // alert(rojo + ' ' + amarillo + ' ' + verde + ' ' + porcentaje + ' ->' + Actual); 


        var chart = new Highcharts.Chart({

            chart: {

                renderTo: 'chart_div5',
                type: 'gauge',
                plotBackgroundColor: null,
                plotBackgroundImage: null,
                plotBorderWidth: 0,
                plotShadow: false
            },

            title: {
                text: titulo
            },
            subtitle: {
                text: ''

            },

            pane: {
                startAngle: -150,
                endAngle: 150,
                background: [{
                    backgroundColor: {
                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                        stops: [
                                [1, '#000000'],
                                [1, '#000000']
                            ]
                    },
                    borderWidth: 0,
                    outerRadius: '108%'
                },



                       {
                       // default background
                   }, {
                       backgroundColor: '#DDD',
                       borderWidth: 0,
                       outerRadius: '105%',
                       innerRadius: '103%'
                   }]
            },

            // the value axis
            yAxis: {
                min: 0,
                max: verde,

                minorTickInterval: porcentaje,

                tickInterval: Actual,
                tickWidth: 2,
                tickPosition: 'inside',
                tickLength: 10,
                tickColor: '#666',
                labels: {
                    step: 1,
                    rotation: 'auto'
                },
                title: {

            },
            plotBands: [{
                from: 0,
                to: rojo,
                color: '#DF5353' // red
            }, {
                from: rojo,
                to: amarillo,
                color: '#DDDF0D' // yellow
            }, {
                from: amarillo,
                to: verde,
                color: '#55BF3B' // green
            }]
        },

        series: [{
            name: 'Actual',
            data: [Actual]
        },
            {
                name: 'Anterior',
                data: [Anterior],
                dataLabels: {
                    formatter: function () {
                        var IntActual = Actual,
                        IntAnterior = Anterior;
                        return '<span style="color:#339">' + IntActual + ' Actual</span><br/>' +
                        '<span style="color:#933">' + IntAnterior + ' Anterior</span>';
                    },
                    backgroundColor: {
                        linearGradient: {
                            x1: 0,
                            y1: 0,
                            x2: 0,
                            y2: 1
                        },
                        stops: [
                        [0, '#DDD'],
                        [1, '#FFF']
                    ]
                    }
                }
            }
                ]

    },

            function (chart) {

            });

}
        

 
    </script>--%>


    <script src="http://code.highcharts.com/highcharts.js" type="text/javascript"></script>
    <script src="http://code.highcharts.com/highcharts-more.js" type="text/javascript"></script>
    <script src="http://code.highcharts.com/modules/exporting.js" type="text/javascript"></script>


</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

 

<div class="demo">

<div id="tabs">
	<ul>
		<li><a href="#tabs-1"> <asp:Label ID="LblTop5" runat="server" Text ="Top Celulares Vendidos" CssClass="contenido"></asp:Label> </a></li>
		<%--<li><a href="#tabs-2">Tipo de Equipo</a></li>
		<li><a href="#tabs-3">Precios</a></li>--%>
	</ul>
	<div id="tabs-1">
        

                     <table style="width: 100%;">

            <tr>
                    <td style="width:5%;"></td>
                    <td style="width:10%;"></td>
                    <td style="width:20%;"></td>
                    <td style="width:10%;"></td>
                    <td style="width:30%;"></td>
                    <td style="width:20%;"></td>
                    <td style="width:5%;"></td>
            </tr>
            <tr>
            <td colspan="7">
               <fieldset>
                    <legend> Filtro </legend>
                          <table width="100%"> 
                               <tr>
                            <td style="width:5%;"></td>
                            <td style="width:10%;"></td>
                            <td style="width:25%;"></td>
                            <td style="width:10%;"></td>
                            <td style="width:25%;"></td>
                            <td style="width:20%;"></td>
                            <td style="width:5%;"></td>
                               </tr>

                                <tr>
                                           <td></td>
                                           <td valign="middle" align="right">
                                                <asp:Label ID="lblModelo" runat="server" Text="Tipo: " CssClass="contenido"></asp:Label>
                                           </td>
                                           <td > 
                                                <asp:DropDownList ID="cboTipo" runat="Server" Width="90%" CssClass="contenido">
                                                    <asp:ListItem Value="0">Seleccione</asp:ListItem>
                                                    <asp:ListItem Value="1">Top 5</asp:ListItem>
                                                    <asp:ListItem Value="2">Top 10</asp:ListItem>
                                                    <asp:ListItem Value="3">Todos</asp:ListItem>
                                                </asp:DropDownList>
                                           </td>
                                            <td align="right"> <asp:Label ID="lblFiltro" runat="server" Text="Filtro: " CssClass="contenido"></asp:Label></td>
                                            <td> <asp:RadioButtonList runat="server" ID="RdFiltro" RepeatDirection="Horizontal" CssClass="contenido">
                                                <asp:ListItem Selected="True" Value="01">Asc</asp:ListItem>
                                                <asp:ListItem Value="02">Desc</asp:ListItem>
                                                </asp:RadioButtonList> </td>
                                           <td rowspan="1">
                                            <asp:ImageButton ID="btnConsulta" runat="server"  
                                                   ImageUrl="~/Imagenes Pagina/Buscar.jpg"/>
                                           </td>
                                           <td></td>
                                </tr>
                          </table>
                </fieldset>
            </td>
        </tr>
            <tr>
            <td></td>
                <td colspan="3">
                    <asp:GridView ID="GridView2" runat="server" Width="100%" CellPadding="4" ForeColor="#333333" 
                    GridLines="None" AllowPaging="True" RowStyle-HorizontalAlign="Left" 
                        PageSize="5">
                    <AlternatingRowStyle BackColor="White" ForeColor="#7DA2B1" />
                    <EditRowStyle BackColor="#999999" />
                    <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                    <HeaderStyle BackColor="#7DA2B1" Font-Bold="True" ForeColor="White" />
                    <PagerStyle BackColor="#7DA2B1" ForeColor="White" HorizontalAlign="Center" />
                    <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
                    <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
                    <SortedAscendingCellStyle BackColor="#E9E7E2" />
                    <SortedAscendingHeaderStyle BackColor="#506C8C" />
                    <SortedDescendingCellStyle BackColor="#FFFDF8" />
                    <SortedDescendingHeaderStyle BackColor="#6F8DAE" />
                </asp:GridView>
                <div style="display:none;">
                    <asp:GridView ID="GridView1" runat="server">
                    </asp:GridView>
                    </div>

                </td>
                <td colspan="3">
                    <div id="container" style="width:125%; height: 250PX; margin: 0 auto; vertical-align:top; "></div>
                </td>
                
            </tr>


       </table>

     
	</div>
	
</div>

</div><!-- End demo -->

</asp:Content>

